<script setup>
import { reactive } from 'vue';
import { ref } from 'vue';
import axios from 'axios';
import {upload,submit} from '@/apis/message.js';
// import {getCurrentInstance} from 'vue'
// const {proxy} = getCurrentInstance()
 
const selectRef=ref();
const userL=ref([]);
const File_Photo=new FormData();


axios.get('http://175.178.62.164:61803/student/list').then(res=>{
  for (let i = 0; i < res.data.data.length; i++) {
      userL.value.push({
      value:res.data.data[i].openid,
      label:res.data.data[i].studentInfo.name
    });
  }
}).catch(err=>{
  console.log(err);
})


const form = ref({
  "students": [],                             //多选时的值就应该是一个json对象
  "title": '',
  "content": '',
  "select": '',
  "url":'',
  "deadline":'',
  "ticket":'',
  "normal":''
})
//传送文本
const onSubmit = async () => {                      //form是一个object

//判断文本内容
if(form.value.title==''){
    console.log('没有标题');
    ElMessage({
    message: '标题不能为空!',
    type: 'error',
    });
    document.getElementById('title_id').focus();
    return;
  }
  else if(form.value.content==''){
    ElMessage({
    message: '内容不能为空!',
    type: 'error',
  });
  document.getElementById("content_id").focus();
  return;
  }
  else if(form.value.select==''){
    ElMessage({
    message: '选项不能为空!',
    type: 'error',
  });
  return;
  } 
  else if(form.value.students.length==0){     //没有选择
    ElMessage({
    message: '目标用户不能为空!',
    type: 'error',
  });
  document.getElementById('students_id').focus();
  return;
  }
  else{
    if(form.value.select=="详情"){                                        //四选一选项的处理
      form.value.normal=1;           //发送之后还要清零
    }
    if(form.value.select=="接受/拒绝/异常反馈"&&form.value.deadline==''){   
      ElMessage({
      message: '有效时间不能为空!',
      type: 'error',
    });
    document.getElementsByClassName('deadline_input').focus();
    return;
    }
    if(form.value.select=="跳转链接"&&form.value.url==''){   
      ElMessage({
      message: '跳转链接不能为空!',
      type: 'error',
    });
    document.getElementsByClassName('url_input').focus();
    return;
    }
    if(form.value.select=="上传二维码"&&form.value.ticket==''){   
      ElMessage({
      message: '未上传二维码!',
      type: 'error',
    });
    return;
    }
    //转为允许的格式，即四个属性只能有一个存在
    const data=ref({
      "title":form.value.title,
      "content":form.value.content
    });
    data.value["students"]=form.value.students;

    if(form.value.url!=""){
      data.value["url"]=form.value.url;
      submit(data.value).then(res=>{
          console.log(res);
          form.value.normal="";                           //清空
          form.value.ticket="";
          form.value.url="";
          form.value.deadline="";
        }).catch(err=>{
          console.log(err);
        })
    }
    else if(form.value.normal!=""){
      data.value["normal"]=form.value.normal;
      submit(data.value).then(res=>{
          console.log(res);
          form.value.normal="";                           //清空
          form.value.ticket="";
          form.value.url="";
          form.value.deadline="";
      }).catch(err=>{
        console.log(err);
      })
    }
    else if(form.value.ticket!=""){
      upload(File_Photo).then(res=>{
          data.value["ticket"]=res.data.data;
          console.log(data);
          console.log(res.data.data);
          console.log('上传文件成功!');
      }).then(()=>{
          submit(data.value).then(res=>{
          console.log(res);
          form.value.normal="";                           //清空
          form.value.ticket="";
          form.value.url="";
          form.value.deadline="";
        }).catch(err=>{
          console.log(err);
        })
      }
      ).catch(err=>{
        console.log(err);
        console.log('上传文件失败！');
      })
    }
    else if(form.value.deadline!=""){
      form.value.deadline=parseInt(form.value.deadline);                      //若有，则转为整数int
      data.value["deadline"]=form.value.deadline;

      submit(data.value).then(res=>{
      console.log(res);
      form.value.normal="";                           //清空
      form.value.ticket="";
      form.value.url="";
      form.value.deadline="";
    }).catch(err=>{
      console.log(err);
    })
   }
  }
  ElMessage({
    message: '成功发送!',
    type: 'success',
  });
}
const change=()=>{
  // console.log(proxy.$.refs.selectRef.query);
  // proxy.$.refs.selectRef.query='';
  selectRef.value.query='';
}
const handleChange=(UploadFile,uploadFileList)=> { //文件上传时，修改url,第一个是file对象，第二个是file对象数组
    File_Photo.set('photo',UploadFile.raw);
    form.value.ticket="/image/"+UploadFile.name;
};
const handleExceed=(File,UploadUserFile)=>{           //第一个是新上传的文件的file对象数组，第二个是旧的file文件数组，元素是对象
      UploadUserFile[0]=File[0];                      //将新上传的文件直接赋予到待上传的文件中，同时修改url
      form.value.ticket="/image/"+UploadUserFile[0].name;
      File_Photo.set('photo',UploadUserFile[0]);
      // console.log(UploadUserFile[0]);
}
</script>

<template>
  <div class="containerBox">
    <el-form :model="form" label-width="1px" label-position="top" >
      <el-form-item label="目标用户" class="label_self" text-overflow: ellipsis>
        <el-select
          ref="selectRef"
          v-model="form.students"
          multiple
          placeholder="Select"
          :filterable="true"
          value-key="openid"
          @change="change"
          :clearable="true"
          id="students_id"
        >
        <el-option v-for="item in userL"
          :key="item.value"
          :label="item.label"
          :value="{openid:item.value}"
        />
    </el-select>
      </el-form-item>

      <el-form-item label="标题" class="label_self">
        <el-input
          v-model="form.title"
          maxlength="20"
          show-word-limit
          type="text"
          id="title_id"
          :clearable="true"
        />
      </el-form-item>

    <el-form-item label="内容" class="label_self">
      <el-input
        v-model="form.content"
        :autosize="{ minRows: 5, maxRows: 5 }"
        resize="none"
        type="textarea"
        id="content_id"
      />
    </el-form-item>

    <el-form-item label="显示选项" class="label_self">
      <el-radio-group v-model="form.select">
        <el-radio label="接受/拒绝/异常反馈" class="deadline_label"/>
        <div class="border">
          <el-input v-model="form.deadline" :disabled="form.select!=='接受/拒绝/异常反馈'" class="deadline_input" placeholder="输入有效时间(/时)"></el-input>
        </div>
        <el-radio label="跳转链接" class="url_label"/>
        <div class="border">
          <el-input v-model="form.url" :disabled="form.select!=='跳转链接'" class="url_input"></el-input>
        </div>
        <el-radio label="详情" v-model="form.normal"/>
        <el-radio label="上传二维码" class="ticket_label"/>
          <el-upload
            method="post"
            class="upload-demo"
            action="#"             
            :limit="1"
            :auto-upload="false"
            :on-exceed="handleExceed"
            :disabled="form.select!='上传二维码'"
            :on-change="handleChange"
          >
          <template #trigger>
            <el-button type="primary" class="ticket_button">上传</el-button>
          </template>
        </el-upload>
      </el-radio-group>
    </el-form-item>

    <el-form-item class="button">
      <el-button type="primary" @click="onSubmit">发送</el-button>
    </el-form-item>

  </el-form>
  </div>
</template>

<style scoped>
.containerBox{
  overflow: hidden;
  /* 解决外边距折叠现象-塌陷现象 */
  background-color: #fff;
  margin: 0 1vw;
  height: 90vh;
}
.containerBox ::v-deep .el-select__tags .el-tag--info{
  background-color: #ffffff!important;
  font-weight: bold;
}
.containerBox ::v-deep .el-tag{
  color: black;
}
.containerBox ::v-deep .el-select{        /* 多选框的长度 */
    width: 80vw!important;
}
.containerBox ::v-deep .el-select__tags{
  white-space: nowrap;
  flex-wrap: nowrap;
}
.containerBox ::v-deep .el-select .el-select-tags-wrapper.has-prefix {
    text-overflow: ellipsis;
    overflow: hidden;
}
.containerBox ::v-deep .el-radio-group{
  align-items: flex-start;
}
.containerBox ::v-deep .el-form{
  height: 90vh;
}
.label_self{
  margin: 0 3vw;
  padding: 5vh 0 0 0;
  font-size: 20vw!important;
}
.containerBox ::v-deep  .el-form--default.el-form--label-top .el-form-item .el-form-item__label{
    font-size: 1.3vw;
    color: black;
    margin: 0 0 2vh 0;
}
.containerBox ::v-deep  .el-input{
  width: 80vw;
  /* overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;  */
}

.containerBox ::v-deep  .el-input__wrapper{
  border-radius: 30px;
  border: 1px solid #232323;
}
.containerBox ::v-deep  .el-textarea__inner{
  border-radius: 20px;
  border: 1px solid #232323;
  width: 80vw;
}
.containerBox ::v-deep .el-radio__inner::after{
  background-color: #2196F3;
}
.containerBox ::v-deep .el-radio__label{
  font-size: 1vw;
}
.label_self ::v-deep .el-radio__inner{
  --el-border-color: #232323!important;
}
.ticket_label{
  margin-right: 1vw;
  margin-left: 1vw;
}
.deadline_label{
 margin-right: 1vw!important;
}
.deadline_input{
  width: 10vw!important;
  height: 4vh!important;
  margin: 0 2vw 0 0!important;
  padding: 0!important;
}
.url_label{
  margin: 0 0.5vw 0 0!important;
}
.url_input{
  width: 16vw!important;
  height: 4vh!important;
  margin: 0 2vw 0 0!important;
  padding: 0!important;
}
.button{
  margin: 2vh 0 0 70vw;
  size: 7vw;
}
.containerBox ::v-deep  .el-button--primary{
  width: 10vw;
  height: 5vh;
}
.containerBox ::v-deep .el-upload-list__item-file-name{
  max-width: 5vw;
}
.ticket_button{
  position: relative;
  top: -0.5vh;
  width: 5vw!important;
}
</style>